<template>
  <div class="course-edit">

    <div class="top-form">
      <div class="cover">
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="questionInfo.cover" :src="questionInfo.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="info">
        <el-form label-width="70px">
          <el-form-item label="标题" style="width: 820px">
            <el-input v-model="questionInfo.title"></el-input>
          </el-form-item>
          <el-form-item label="热点问题" style="width: 820px">
            <el-switch
                v-model="questionInfo.isHot">
            </el-switch>
          </el-form-item>
          <el-form-item label="加精问题" style="width: 820px">
            <el-switch
                v-model="questionInfo.isSpecial">
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>

<!--    <div class="tips">-->
<!--      <div class="tip-list">-->
<!--        <div class="tip" :class="{'tip-on' : currentTip === index}" @click="changeTip(index)" v-for="(tip,index) in tips">-->
<!--          {{tip}}-->
<!--        </div>-->
<!--      </div>-->


<!--    </div>-->

    <div  style="width: 1120px;margin-top: 20px">
      <WangEditor :intro-html="questionInfo.context"  @setIntroduction="setIntroduction"/>
    </div>



    <div class="save-button">
      <el-button type="primary" @click="updateQuestion">保存修改</el-button>
    </div>

  </div>

</template>

<script>

import UploadAuthVue from '@/components/UploadAuth.vue'
import OssUploader from '@/components/OssUploader.vue'
import WangEditor from "@/components/WangEditor.vue";
import CourseStructureEdit from "@/views/course/CourseStructureEditView.vue";
import ProblemPage from "@/views/manage/course/problem/ProblemPageView.vue";
import {client} from "@/utils/oss";

export default {
  components: {UploadAuthVue, OssUploader, WangEditor, CourseStructureEdit,ProblemPage},
  data() {
    return {
      // 课程基本信息
      questionInfo: {},
      imageUrl:""
    }
  },

  mounted() {
    if (this.$route.params && this.$route.params.id) {
      this.questionInfo.id = this.$route.params.id
      this.getQuestionInfo()
    }
  },

  methods: {
    getQuestionInfo() {
      this.$api.getQuestionInfo({id: this.questionInfo.id})
          .then(res => {
            this.questionInfo = res.data
          })
    },
    // 基本信息修改
    updateQuestion() {
      this.questionInfo.cover = this.imageUrl
      this.$api.questionUpdate(this.questionInfo).then(() => {
        this.$message.success("成功")
        this.getQuestionInfo(this.questionInfo.id)
      })
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file)
    },
    beforeAvatarUpload(file) {
      client().multipartUpload(file.name || Date.now().toString(), file)
          .then((result) => {
            let url = result.res.requestUrls[0];
            this.imageUrl = url.split("?upload")[0]
          });
    },

    // 富文本编辑器内容设置
    setIntroduction: function (html) {
      this.questionInfo.context = html;//在父组件修改值
    },

    changeTip(index){
      this.currentTip = index
    }
  }
}
</script>

<style scoped lang="scss">

.course-edit {
  width: 1120px;
  display: flex;
  flex-direction: column;

  .top-form {
    width: 1120px;
    display: flex;
    flex-direction: row;

    .cover {
      width: 300px;
      height: 200px;
      border-radius: 10px;
      overflow: hidden;

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }

      .avatar {
        width: 300px;
        height: 200px;
        display: block;
      }


    }

    .info {
      width: 900px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

  }

  .tips{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 1120px;
    margin-top: 20px;

    .tip-list{
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .tip{
        padding: 10px 20px;
        border-radius: 5px;
      }

      .tip:hover{
        cursor: pointer;
      }

      .tip-on{
        background-color: #d9d8d8;
      }


    }
  }

  .submit {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px
  }

  .question {
    padding: 10px 20px;
    border-radius: 10px;
    background: #eaeaea;
    margin: 10px 0;

    > div {
      margin: 10px 0;
    }


    .option {
      margin: 5px 0;

      label {
        cursor: pointer;
      }

      .chose-icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        border: 3.5px solid #afafaf;
        margin-right: 10px;
        transform: translateY(2px);
        background: #fff;
        transition: 0.2s;
      }

      .chose-icon.chosen {
        transition: 0.2s;
        background: #619dff;
      }

      .chosen.wrong {
        background: #da6d6d;
      }

      .circle {
        border-radius: 50%;
      }
    }
  }

}



</style>
